<template>
  <div id="top">
    <!--  网页头部-->
    <el-header>
      <ul>
        <li>首页</li>
        <li>我的出版</li>
        <li>收益</li>
        <li>销售代理人</li>
      </ul>
      <div class="pressphoto" alt="prImg"><img></div>
    </el-header>
<!--    网页主体-->
    <div id="main">
      <div id="pressTitle">
      <div class="pressName">
        <span>{{press.prname}}</span>
      </div>
      <div class="pressName1">
        <span>地址：</span><span>{{press.prsite}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>联系电话：</span><span>{{press.prphone}}</span>
      </div>
      </div>
      <div id="pressInfo">
      <div id="pressInfoleft" >
        <div id="bookTitle">热门书籍</div>
        <bookranklist></bookranklist>
      </div>
      </div>
    </div>
<!--  网页底部  -->
    <el-footer>

    </el-footer>
  </div>
</template>
<script>
import api from "../../../../axios/api"
import Bookranklist from "../../public/bookranklist";
// import utils from "../../../../static/js/utils/utils";
export default {

  name: "index",
  components: {Bookranklist},
  data() {
    return {
      press: "",
      prno:""

    }

  },
  methods: {
    getImgUrl: function (imgsrc) {
      return this.$store.state.host + "/upload/images/press/"+ imgsrc;
    },
    setDataFromAxios: function (currPage) {
      //this.initpic();
      if (currPage != null) {
        this.currentPage = currPage;
      }
      //console.log(prno)
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("/api/pressController/selectPressWithSalesagentAndBooks/"+this.prno, null, "post")
        .then(dto => {
          console.log(dto);
          this.press = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

    },

  },
  created() {
    this.prno = this.$route.params.prno;
    if(this.prno==undefined||this.prno==null||this.prno==''){
      this.prno=localStorage.getItem('prno');
    }
    this.setDataFromAxios();

  }
}
</script>
<style scoped>
ul{margin:0; padding:0;}
#top{width:1200px ;margin: 0 auto;background-color: #009688;}
.el-header > ul{ width:900px; color: white; list-style-type:none; float: left; font-size:16px; font-weight: 600; font-family:宋体; }
.el-header > ul > li{float:left; list-style:none; padding:20px 100px 0px 0px;}
.el-header > .pressphoto{float: right;}
.el-header > .pressphoto > img{width: 45px; height: 45px; border-radius:50%;margin: 7px 0 0 0}
#main {width:1200px ;background-color: #F5F5F5;height:1000px;}
#main >#pressTitle{ width: 1200px; height: 50px;}
#pressTitle > .pressName{width: 1200px; text-align: center; font-size: 25px; font-weight: 900;padding-top: 10px;}
#pressTitle > .pressName1{ width: 1200px; height: 10px;font-size: 13px;}
#main > #pressInfo{width:1200px;height: 400px;margin-top: 50px; }
#pressInfo > #pressInfoleft{width: 690px; height: 400px; float: left; border:1px solid #009688; border-radius:5px; }
#pressInfo > #pressInfoleft > #bookTitle{width: 690px; height: 50px; text-align: left; font-size: 20px; font-weight: 500;padding-left: 20px }
#main > #pressInfo > #pressInfoReight{width: 490px; height: 400px; float: right; border:1px solid #009688; border-radius:5px;}
#pressbook{width: 1200px; height: 300px;border:1px solid #009688; border-radius:5px; margin-top: 10px;}
</style>
